<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
        display: block;
        width: 30vw;
    }
    
    .innerImg {
        width: 100%;
        border-radius: 15px;
    }
    
    table {
        user-select: none;
        width: 100%;
        text-align: center;
        border: none;
        /* 设置表格中单元格间距为0  */
        border-spacing: 0px;
        border: 3px solid rgba(173, 173, 173, 0.099);
        border-radius: 15px;
    }
    
    thead {
        height: 3em;
        background-color: rgba(250, 250, 250, 0.717);
    }
    
    .foot {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        align-items: center;
        border-top: 3px solid rgba(173, 173, 173, 0.099);
    }
    
    .foot>div {
        display: flex;
        align-items: center;
    }
    
    th {
        font-weight: normal;
        border-bottom: 3px solid rgba(173, 173, 173, 0.099);
    }
    
    td {
        padding: 0;
    }
    
    .dataRows {
        transition: all 1s ease-in-out;
    }
    
    .dataRows:hover {
        background-color: rgb(246, 247, 252)
    }
    
    .active {
        background-color: rgb(246, 247, 252)
    }
    
    .itemsImg {
        width: 5vw;
    }
    
    input {
        outline: none;
    }
    
    .numInput {
        width: 2.5em;
        height: 2.5em;
        box-sizing: border-box;
        text-align: center;
        margin: 0;
        border: 2px solid rgba(173, 173, 173, 0.099);
    }
    
    .changeNumBtn {
        height: 2.5em;
        width: 2.5em;
        background-color: rgb(246, 247, 252);
        border: 2px solid rgba(173, 173, 173, 0.099);
        margin: 0;
    }
    
    button {
        cursor: pointer;
    }
    
    .Btn {
        border: none;
        height: 2em;
        border-radius: 5px;
        color: white;
    }
    
    .removeBtn {
        background-color: red;
    }
    
    .submitBtn {
        background-color: rgb(56, 128, 235);
        margin-left: 5px;
    }
    
    .costTotal {
        font-size: 2em;
        font-weight: bolder;
        color: red;
    }
    
    .empty {
        user-select: none;
        width: 100%;
        height: 200px;
        line-height: 200px;
        font-size: 3em;
        background-color: rgba(185, 193, 206, 0.717);
        border-radius: 15px;
        text-align: center;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <img class="innerImg" src="images/innerImg.jpg" alt="">
        <p>🏠/购物车</p>
        <table v-if="fruitList.length!=0">
            <thead>
                <tr>
                    <th>选中</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>个数</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="dataRows" v-for="(item, index) in fruitList" :key="item.id" :class="{active:item.select}">
                    <td>
                        <input :disabled="item.num===0" v-model="item.select" type="checkbox" name="select">
                    </td>
                    <td>
                        <img class="itemsImg" :src="item.imgSrc">
                    </td>
                    <td>{{item.unitValue}}</td>
                    <td>
                        <button class="changeNumBtn" @click="changeNum(1,index)">+</button><input maxlength="2" class="numInput" v-model.number="item.num" type="text"><button :disabled="item.num===0" class="changeNumBtn" @click="changeNum(-1,index)">-</button>
                    </td>
                    <!-- 注意！数据类型错误将导致.toFixed()无法识别为函数 -->
                    <td>{{item.subTotal=+((item.num*item.unitValue).toFixed(2))}}</td>
                    <td>
                        <button class="removeBtn Btn" @click="remove(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6">
                        <div class="foot">
                            <div>
                                <input v-model="isAll" type="checkbox"> 全选
                            </div>
                            <div>
                                <span>总价：￥</span>
                                <span class="costTotal">{{TotalCost}}</span>
                                <button class="submitBtn Btn">结算({{selectedCount}})</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="empty" v-else>🛒空空如也</div>
    </div>
    <script src="vue.js"></script>
    <script>
        const defaultArr = [{
            id: 1,
            select: false,
            imgSrc: 'images/1.png',
            unitValue: 2.73,
            num: 1,
            subTotal: 1,
        }, {
            id: 2,
            select: false,
            imgSrc: 'images/2.png',
            unitValue: 3.37,
            num: 1,
            subTotal: 1,
        }, {
            id: 3,
            select: false,
            imgSrc: 'images/3.png',
            unitValue: 3.48,
            num: 1,
            subTotal: 1,
        }, {
            id: 4,
            select: false,
            imgSrc: 'images/4.png',
            unitValue: 3.05,
            num: 1,
            subTotal: 1,
        }, {
            id: 5,
            select: false,
            imgSrc: 'images/5.png',
            unitValue: 2.80,
            num: 1,
            subTotal: 1,
        }, ]
        const app = new Vue({
            el: '#app',
            data: {
                // 运用||运算符短路运算，若localstorage中没有取到相关数据，则初始化为默认数组
                fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,
            },
            methods: {
                changeNum(value, index) {
                    this.fruitList[index].num += value
                    if (this.fruitList[index].num === 0) {
                        this.fruitList[index].select = false
                        return
                    }
                    // arr.find方法 根据条件遍历数组并返回满足条件的数组对象
                    // const test= this.fruitList.find((item) => item.id === id)
                },
                remove(target) {
                    this.fruitList = this.fruitList.filter((items) => items.id !== target)
                }
            },
            computed: {
                TotalCost() {
                    return (this.fruitList.reduce((sum, item) => sum + (item.select === true ? item.subTotal : 0), 0)).toFixed(2)
                        // 扩展写法，注意需要return
                        // return (this.fruitList.reduce((sum, item) => {
                        //     if (item.select) {
                        //         return sum + item.subTotal
                        //     } else {
                        //         return sum
                        //     }).toFixed(2)
                        // })
                },
                isAll: {
                    get() {
                        return this.fruitList.every(item => item.select)
                    },
                    set(value) {
                        this.fruitList.forEach(item => {
                            item.select = value
                        })
                    }
                },
                selectedCount() {
                    let count = 0;
                    this.fruitList.forEach(item => {
                        if (item.select) {
                            count++
                        }
                    })
                    return count
                }
            },
            // 持久化到本地
            watch: {
                fruitList: {
                    deep: true,
                    handler(newValue) {
                        // 运用localstorage,将修改后的数组保存到本地
                        localStorage.setItem('list', JSON.stringify(newValue))
                    }
                }
            }
        })
    </script>
</body>

</html>